<template>
  <div class="view-tinymce">
    <n-card>
      <n-h2 prefix="bar">
        <n-text type="primary">tinymce组件示例</n-text>
      </n-h2>
      <n-space>
        <n-button
          @click="config.radius = !config.radius"
          :type="config.radius ? 'success' : 'default'"
        >
          圆弧
        </n-button>
        <n-button
          @click="config.border = !config.border"
          :type="config.border ? 'success' : 'default'"
        >
          边框
        </n-button>
        <n-button
          @click="config.showInfo = !config.showInfo"
          :type="config.showInfo ? 'success' : 'default'"
        >
          显示提示信息
        </n-button>
        <n-button
          @click="config.height = 400"
          :type="config.height === 400 ? 'success' : 'default'"
        >
          默认高度：400px
        </n-button>
        <n-button
          @click="config.disabled = false"
          :type="!config.disabled ? 'success' : 'default'"
        >
          可写
        </n-button>
        <n-button
          @click="config.disabled = true"
          :type="config.disabled ? 'success' : 'default'"
        >
          只读
        </n-button>
      </n-space>
    </n-card>
    <div class="tinymce-editor">
      <n-card>
        <n-h3 prefix="bar">
          <n-text type="primary">tinymce</n-text>
        </n-h3>
        <pro-tinymce v-bind="config" v-model="value" :key="config.disabled" />
      </n-card>
    </div>
    <div class="tinymce-editor">
      <n-card>
        <n-h3 prefix="bar">
          <n-text type="primary">
            (首选) iframe渲染 | pro-tinymce-html组件
          </n-text>
        </n-h3>
        <div>
          <pro-tinymce-html :html="value" />
        </div>
      </n-card>
    </div>
    <div class="tinymce-editor">
      <n-card>
        <n-h3 prefix="bar">
          <n-text type="primary">v-html渲染</n-text>
        </n-h3>
        <div v-html="value"></div>
      </n-card>
    </div>
  </div>
</template>
<script lang="ts" setup name="Tinymce">
  const value = ref('')
  const defaultFont = {
    fontName: '宋体',
    fontSize: '18px'
  }
  const config = reactive({
    showInfo: true,
    radius: true,
    border: true,
    height: 400,
    disabled: false,
    defaultFont
  })
</script>
<style lang="less" scoped>
  .tinymce-editor {
    margin-top: 20px;
  }
</style>
